<!-- 栏目组件 -->
<template>
	<view class="column">
		<!-- 栏目标题 -->
		<view class="Title">
			<view>{{ title }}</view>
			<u-button class="moreBtn" shape="circle" size="mini">{{ btnText }}</u-button>
		</view>
		<!-- 主体部分,允许横向滑动-->
		<view class="column-content">
			<scroll-view scroll-x="true" :style="`height: ${scrollViewHeight}rpx;`">
				<slot />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			link: {
				type: String,
				default: ''
			},
			btnText: {
				type: String,
				default: '查看更多'
			},
			scrollViewHeight:{
				type: Number,
				default: 300
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped lang="scss">
	// 歌单推荐
	.column {

		// 标题
		.Title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				color: #323232;
				font-weight: bold;
			}

			.moreBtn {
				margin: 0;
				color: #1c1c1c;
			}
		}

		// 内容
		.column-content {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			margin-top: 20rpx;
		}
	}
</style>
